<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省份政策查询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#1E40AF',
                        neutral: '#F1F5F9',
                        'neutral-dark': '#334155',
                        // 新增柔和蓝色系列
                        'sky-light': '#E0F2FE',    // 背景色
                        'sky-medium': '#BAE6FD',  // 悬停色
                        'sky-dark': '#7DD3FC',    // 强调色
                        'border-light': '#E0F2FE', // 边框色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 24px rgba(59, 130, 246, 0.15)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.4s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .province-card {
                @apply bg-white rounded-xl border border-border-light p-3 text-center shadow-card transition-all duration-300 cursor-pointer;
            }
            .province-card:hover {
                @apply bg-sky-light shadow-card-hover transform scale-105;
            }
            .province-name {
                @apply font-medium text-neutral-dark text-base;
            }
            .search-container {
                @apply relative mb-6;
            }
            .search-input {
                @apply w-full px-4 py-3 rounded-xl border border-sky-light focus:outline-none focus:ring-2 focus:ring-sky-dark/50 focus:border-sky-dark;
            }
            .search-icon {
                @apply absolute right-4 top-3.5 text-gray-400;
            }
            .draggable-window {
                @apply fixed right-5 bottom-5 w-[350px] max-h-[80vh] bg-white rounded-xl shadow-lg overflow-auto transition-all duration-300 z-50 opacity-0 scale-95 invisible;
            }
            .draggable-window.active {
                @apply opacity-100 scale-100 visible;
            }
            .window-header {
                @apply p-4 bg-sky-light border-b border-sky-medium cursor-move flex justify-between items-center rounded-t-xl;
            }
            .window-content {
                @apply p-5 leading-relaxed text-gray-700;
            }
            .close-btn {
                @apply text-xl cursor-pointer text-gray-500 hover:text-red-500 transition-colors;
            }
            .policy-title {
                @apply text-xl font-bold text-primary mb-3;
            }
            .section-title {
                @apply text-lg font-semibold text-neutral-dark mb-1 mt-4;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .slide-up {
                animation: slideUp 0.4s ease-out;
            }
            .read-aloud-btn {
                @apply fixed right-5 top-1/2 transform -translate-y-1/2 bg-primary text-white p-3 rounded-full shadow-lg cursor-pointer hover:bg-secondary transition-all duration-300 z-50;
            }
            .read-aloud-btn:hover {
                @apply transform -translate-y-1/2 scale-110;
            }
            .read-aloud-btn.active {
                @apply bg-red-500 hover:bg-red-600;
            }
        }
    </style>
</head>
<body class="bg-sky-light/30 min-h-screen">
<!-- 左上角返回按钮 -->
<a href="index.html" class="fixed top-4 left-4 z-10 flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-md text-gray-600 hover:bg-gray-100 hover:text-blue-500 transition duration-300">
    <i class="fa fa-arrow-left fa-lg"></i>
</a>
<div class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 头部区域 -->
    <header class="mb-8 text-center">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-2">
            <i class="fa fa-university mr-2"></i>省份政策查询
        </h1>
        <p class="text-gray-600 mb-6">查找全国各省份最新残疾人就业政策</p>
    </header>

    <!-- 搜索框 -->
    <div class="search-container slide-up">
        <input type="text" id="searchInput" placeholder="搜索省份..."
               class="search-input" oninput="filterProvinces()">
        <i class="fa fa-search search-icon"></i>
    </div>

    <!-- 阅读助手按钮 -->
    <div id="readAloudBtn" class="read-aloud-btn" title="点击朗读内容">
        <i class="fa fa-volume-up"></i>
    </div>

    <!-- 省份列表 -->
    <div id="provinceGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
        <!-- 省份卡片将通过JavaScript动态生成 -->
    </div>

    <!-- 提示信息 -->
    <div class="mt-8 text-center text-gray-500 text-sm">
        <p>点击省份卡片查看详细政策内容</p>
    </div>

    <!-- 可拖动的政策显示窗口 -->
    <div class="draggable-window" id="policyWindow">
        <div class="window-header" id="dragHandle">
            <span id="windowTitle" class="font-medium">政策详情</span>
            <span class="close-btn" onclick="toggleWindow()">×</span>
        </div>
        <div class="window-content" id="policyContent">
            请点击上方省份卡片查看对应政策
        </div>
    </div>
</div>

<script>
    // 所有省份列表
    const provinces = [
        "北京市", "天津市", "河北省", "山西省", "内蒙古自治区",
        "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省",
        "浙江省", "安徽省", "福建省", "江西省", "山东省",
        "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区",
        "海南省", "重庆市", "四川省", "贵州省", "云南省",
        "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区",
        "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"
    ];

    // 缓存DOM元素
    const provinceGrid = document.getElementById('provinceGrid');
    const policyWindow = document.getElementById('policyWindow');
    const policyContent = document.getElementById('policyContent');
    const windowTitle = document.getElementById('windowTitle');
    const searchInput = document.getElementById('searchInput');

    // 窗口状态
    let isWindowOpen = false;
    let speechSynthesis = window.speechSynthesis;
    let isReading = false;

    // 阅读助手功能
    function toggleReadAloud() {
        const btn = document.getElementById('readAloudBtn');
        const icon = btn.querySelector('i');

        if (isReading) {
            // 停止朗读
            speechSynthesis.cancel();
            isReading = false;
            btn.classList.remove('active');
            icon.className = 'fa fa-volume-up';
        } else {
            // 开始朗读
            const content = policyContent.innerText;
            if (content && content !== '请点击上方省份卡片查看对应政策') {
                const utterance = new SpeechSynthesisUtterance(content);
                utterance.lang = 'zh-CN';
                utterance.rate = 1.0;
                utterance.pitch = 1.0;

                utterance.onend = () => {
                    isReading = false;
                    btn.classList.remove('active');
                    icon.className = 'fa fa-volume-up';
                };

                speechSynthesis.speak(utterance);
                isReading = true;
                btn.classList.add('active');
                icon.className = 'fa fa-stop';
            }
        }
    }

    // 初始化阅读助手按钮
    document.getElementById('readAloudBtn').addEventListener('click', toggleReadAloud);

    // 初始化省份列表
    function initProvinceList() {
        provinceGrid.innerHTML = '';
        provinces.forEach(province => {
            const card = document.createElement('div');
            card.className = 'province-card';
            card.innerHTML = `
                    <div class="province-name">${province}</div>
                    <div class="mt-2 text-xs text-gray-500">
                        <i class="fa fa-file-text-o"></i> 政策详情
                    </div>
                `;
            card.addEventListener('click', () => loadProvincePolicy(province));
            provinceGrid.appendChild(card);
        });
    }

    // 模拟加载省份政策内容
    function loadProvincePolicy(province) {
        // 显示加载状态
        windowTitle.textContent = `${province}政策详情`;
        policyContent.innerHTML = `
                <div class="text-center py-8">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-sky-light border-t-sky-dark mb-3"></div>
                    <p class="text-gray-500">正在加载政策内容...</p>
                </div>
            `;
        showWindow();

        // 模拟网络请求延迟
        setTimeout(() => {
            // 根据省份显示对应的政策内容
            const policyHtml = generatePolicyHtml(province);
            displayPolicyContent(policyHtml);
        }, 800);
    }

    // 显示政策内容
    function displayPolicyContent(policyHtml) {
        // 添加内容更新动画
        policyContent.style.opacity = 0;
        setTimeout(() => {
            policyContent.innerHTML = policyHtml;
            policyContent.style.opacity = 1;
        }, 300);
    }

    // 生成政策HTML内容
    function generatePolicyHtml(province) {
        // 根据省份名称获取对应的政策内容
        const policies = {
            "北京市": `
                <div class="prose max-w-none">
                    <h3 class="policy-title">北京市残疾人就业政策文件</h3>
                    <p class="text-gray-500 text-sm mb-4">发布日期：2025-05-18</p>

                    <h4 class="section-title">一、政策背景与目标</h4>
                    <p>北京市高度重视残疾人就业工作，随着城市发展和对残疾人权益保障意识的提升，不断完善残疾人就业政策体系。依据《北京市促进残疾人就业三年行动方案（2022-2024 年）》等相关政策，目标是到 2024 年底：</p>
                    <ul class="list-disc pl-5 my-3">
                        <li>新增残疾人就业不少于 5000 人</li>
                        <li>进一步提高劳动年龄段有就业能力和就业意愿的残疾人就业率</li>
                        <li>持续优化残疾人就业质量和就业环境</li>
                    </ul>

                    <h4 class="section-title">二、重点支持政策</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">机关事业单位带头安置：</h5>
                    <p>机关、事业单位要发挥带头作用，严格按照不低于本单位在职职工总数 1.5% 的比例安排残疾人就业。编制 50 人以上的市级机关、编制 67 人以上的事业单位（中小学、幼儿园除外），未达比例的至少安排 1 名残疾人就业。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">企业激励措施：</h5>
                    <p>对超比例安排残疾人就业的企业，按每超比例安排 1 名残疾人，每年给予不低于 3.5 万元的奖励。</p>
                    <p>对安排残疾人就业的企业，按规定给予岗位补贴、社会保险补贴等，减轻企业用人成本。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">创业扶持：</h5>
                    <p>残疾人自主创业可申请最高不超过 10 万元的一次性创业补贴，用于启动资金和场地租赁等。</p>
                    <p>为残疾人创业提供免费的创业培训、项目孵化等服务，帮助其提升创业能力和成功率。</p>

                    <h4 class="section-title">三、就业服务体系</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">职业培训：</h5>
                    <p>整合各类职业教育资源，建立市级、区级残疾人职业培训基地，为残疾人提供涵盖人工智能数据标注、文创设计、康复辅助器具适配服务等新兴和传统领域的职业技能培训。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">就业服务平台：</h5>
                    <p>打造 “北京市残疾人就业服务一体化平台”，实现企业用工需求、残疾人求职信息的线上实时对接和动态管理。</p>
                    <p>社区积极开发适合残疾人的公益性岗位，如社区日间照料中心辅助服务岗位、社区文化活动协助岗位等，优先安排就业困难残疾人就业。</p>

                    <h4 class="section-title">四、典型案例</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">某科技企业：</h5>
                    <p>积极响应残疾人就业政策，通过与残联合作开展 “残疾人数字技能提升计划”，已吸纳 20 余名视力、肢体残疾人从事数据标注、软件测试等工作，员工平均月收入超过 5000 元。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">某文创工作室：</h5>
                    <p>由残疾人自主创业成立，在政府创业扶持政策支持下，专注于北京特色文化创意产品开发，带动 15 名残疾人就业，实现了残疾人文化创业与就业增收的双赢。</p>

                    <h4 class="section-title">五、法律依据</h4>
                    <p>《北京市实施 <中华人民共和国残疾人保障法> 办法》明确规定用人单位安排残疾人就业的责任和义务，要求用人单位按比例安排残疾人就业，未达比例的需缴纳残疾人就业保障金。</p>
                    <p>《北京市残疾人就业保障金征收使用管理办法》规范了残疾人就业保障金的征收标准、征收方式以及资金的使用管理，保障残疾人就业工作的资金支持。</p>
                </div>
            `,
            "上海市": `
                <div class="prose max-w-none">
                    <h3 class="policy-title">上海市残疾人就业政策文件</h3>
                    <p class="text-gray-500 text-sm mb-4">发布日期：2025-05-15</p>

                    <h4 class="section-title">一、政策背景与目标</h4>
                    <p>上海市为进一步促进残疾人就业，保障残疾人劳动权利，根据《上海市实施〈中华人民共和国残疾人保障法〉办法》和《上海市残疾人事业发展"十四五"规划》，制定本政策。目标是到2025年，全市残疾人就业规模稳步扩大，就业质量显著提升，就业结构更加优化。</p>

                    <h4 class="section-title">二、主要内容</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">就业支持政策：</h5>
                    <ul class="list-disc pl-5 my-3">
                        <li>对超比例安排残疾人就业的单位，给予每人每年5万元奖励</li>
                        <li>对新招用残疾人的企业，给予一次性岗位补贴3000元/人</li>
                        <li>为残疾人提供职业技能培训，培训期间给予生活补贴</li>
                    </ul>

                    <h5 class="font-medium text-neutral-dark mt-3">创业扶持措施：</h5>
                    <ul class="list-disc pl-5 my-3">
                        <li>残疾人创业可申请最高30万元的创业担保贷款</li>
                        <li>提供创业场地租金补贴，最高每年2万元</li>
                        <li>给予创业项目一次性启动资金补贴5万元</li>
                    </ul>

                    <h4 class="section-title">三、服务保障</h4>
                    <p>建立市、区两级残疾人就业服务平台，提供职业介绍、职业指导、就业援助等服务。加强残疾人就业服务机构建设，提高服务专业化水平。</p>

                    <h4 class="section-title">四、监督管理</h4>
                    <p>用人单位应当按照不低于本单位在职职工总数1.5%的比例安排残疾人就业。未达到规定比例的，应当缴纳残疾人就业保障金。</p>
                </div>
            `,
            "广东省": `
                <div class="prose max-w-none">
                    <h3 class="policy-title">广东省残疾人就业政策文件</h3>
                    <p class="text-gray-500 text-sm mb-4">发布日期：2025-05-10</p>

                    <h4 class="section-title">一、政策背景与目标</h4>
                    <p>为贯彻落实《广东省残疾人保障条例》和《广东省"十四五"残疾人保障和发展规划》，进一步促进残疾人就业创业，结合本省实际，制定本政策。目标是到2025年，实现全省城乡残疾人就业规模稳步增长，就业质量明显提高。</p>

                    <h4 class="section-title">二、重点任务</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">就业促进：</h5>
                    <p>用人单位安排残疾人就业的比例不得低于本单位在职职工总数的1.5%。对超比例安排残疾人就业的用人单位，按规定给予奖励。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">创业扶持：</h5>
                    <p>残疾人自主创业可申请最高20万元的创业补贴。对符合条件的残疾人创业项目，给予场地租赁、设备购置等方面的扶持。</p>

                    <h4 class="section-title">三、保障措施</h4>
                    <ul class="list-disc pl-5 my-3">
                        <li>加强残疾人职业技能培训，建立健全残疾人职业培训体系</li>
                        <li>完善残疾人就业服务网络，提供全方位就业服务</li>
                        <li>加大财政投入，保障残疾人就业创业工作经费</li>
                    </ul>
                </div>
            `,
            "江苏省": `
                <div class="prose max-w-none">
                    <h3 class="policy-title">江苏省残疾人就业政策文件</h3>
                    <p class="text-gray-500 text-sm mb-4">发布日期：2025-05-08</p>

                    <h4 class="section-title">一、政策背景与目标</h4>
                    <p>为进一步促进残疾人就业，保障残疾人劳动权利，推动残疾人事业高质量发展，根据《江苏省残疾人保障条例》和国家有关规定，制定本政策。目标是到2025年，全省残疾人就业规模持续扩大，就业质量不断提高。</p>

                    <h4 class="section-title">二、主要政策</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">就业补贴：</h5>
                    <p>对招用残疾人并签订1年以上劳动合同的用人单位，按规定给予岗位补贴和社会保险补贴。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">创业支持：</h5>
                    <p>残疾人自主创业的，可申请最高15万元的创业补贴。对创业成功的残疾人，给予一次性奖励。</p>

                    <h4 class="section-title">三、服务体系</h4>
                    <p>建立健全残疾人就业服务体系，加强就业服务机构建设，提高就业服务能力和水平。为残疾人提供职业培训、职业介绍、职业指导等服务。</p>
                </div>
            `,
            "浙江省": `
                <div class="prose max-w-none">
                    <h3 class="policy-title">浙江省残疾人就业政策文件</h3>
                    <p class="text-gray-500 text-sm mb-4">发布日期：2025-05-05</p>

                    <h4 class="section-title">一、政策背景与目标</h4>
                    <p>为贯彻落实《浙江省残疾人事业发展"十四五"规划》，进一步促进残疾人就业创业，制定本政策。目标是到2025年，全省残疾人就业规模稳步增长，就业质量显著提升。</p>

                    <h4 class="section-title">二、政策措施</h4>
                    <h5 class="font-medium text-neutral-dark mt-3">就业促进：</h5>
                    <p>用人单位安排残疾人就业的比例不得低于本单位在职职工总数的1.5%。对超比例安排残疾人就业的单位，给予奖励。</p>

                    <h5 class="font-medium text-neutral-dark mt-3">创业扶持：</h5>
                    <p>残疾人自主创业的，可申请最高20万元的创业担保贷款，并享受财政贴息。对符合条件的残疾人创业项目，给予场地租赁补贴。</p>

                    <h4 class="section-title">三、服务保障</h4>
                    <p>加强残疾人就业服务机构建设，为残疾人提供职业培训、职业介绍、职业指导等服务。建立残疾人就业信息平台，实现就业信息共享。</p>
                </div>
            `,
            // 其他省份的政策内容可以在这里继续添加
            // 这里只添加了几个代表性的省份，实际使用时可以扩展更多
        };

        // 如果有该省份的政策，返回对应内容，否则显示默认提示
        return policies[province] || `
            <div class="prose max-w-none">
                <h3 class="policy-title">${province}政策详情</h3>
                <p class="text-gray-500">正在更新中，敬请期待</p>
            </div>
        `;
    }

    // 搜索过滤功能
    function filterProvinces() {
        const searchTerm = searchInput.value.toLowerCase();
        const provinceCards = provinceGrid.querySelectorAll('.province-card');

        // 添加过滤动画
        provinceCards.forEach((card, index) => {
            const provinceName = provinces[index].toLowerCase();
            const match = provinceName.includes(searchTerm);

            // 动画效果
            card.style.transition = 'all 0.3s ease-out';
            card.style.opacity = match ? '1' : '0';
            card.style.transform = match ? 'scale(1)' : 'scale(0.9)';

            setTimeout(() => {
                card.style.display = match ? 'block' : 'none';
            }, 300);
        });
    }

    // 窗口控制
    function toggleWindow() {
        isWindowOpen = !isWindowOpen;
        if (isWindowOpen) {
            policyWindow.classList.add('active');
        } else {
            policyWindow.classList.remove('active');
        }
    }

    function showWindow() {
        if (!isWindowOpen) {
            toggleWindow();
        }
    }

    // 拖动功能实现
    let isDragging = false;
    let startX, startY, xOffset, yOffset;

    document.getElementById('dragHandle').addEventListener('mousedown', (e) => {
        startX = e.clientX;
        startY = e.clientY;
        const style = getComputedStyle(policyWindow);
        xOffset = parseInt(style.left) - startX;
        yOffset = parseInt(style.top) - startY;
        isDragging = true;
        policyWindow.style.cursor = 'grabbing';
        policyWindow.style.transition = 'none';
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            const newX = e.clientX + xOffset;
            const newY = e.clientY + yOffset;

            // 确保窗口不会被拖出可视区域
            const maxX = window.innerWidth - policyWindow.offsetWidth;
            const maxY = window.innerHeight - policyWindow.offsetHeight;

            policyWindow.style.left = `${Math.max(0, Math.min(newX, maxX))}px`;
            policyWindow.style.top = `${Math.max(0, Math.min(newY, maxY))}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            policyWindow.style.cursor = 'grab';
            policyWindow.style.transition = 'all 0.3s ease-out';
        }
    });

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
        initProvinceList();
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                filterProvinces();
            }
        });

        // 添加页面载入动画
        setTimeout(() => {
            document.body.classList.add('loaded');
        }, 300);
    });
</script>
</body>
</html>
